Promise的使用大全(请求数据和调用方法 |
您所在的位置：网站首页 › promise 异步请求 › Promise的使用大全(请求数据和调用方法 |
Promise的使用大全(请求数据和调用方法
|
一、promise的含义和作用 Promise 异步操作之后会有三种状态pending:等待状态，比如正在进行网络请求，或者定时器没有到时间fullfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调.catch()二、什么情况会用到promise 一般情况下有一步请求时，使用promise对这个异步操作进行封装new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）在执行传入的回调函数时，会传入两个参数，resolve,reject 本身又是函数三、promise的基本使用(都在一个html文件下执行，就可以看到效果) 第一种基本写法 new Promise((resolve,reject)=>{ setTimeout(()=>{ // 成功时候调用resolve // resolve('hello-1') // 失败的时候调用reject reject('error message') },1000) }).then((data)=>{ console.log(data); }).catch(err=>{ console.log(er); }) 第二种写法，多次异步调用 new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve() },1000) }).then(()=>{ console.log('hello-100'); return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve() },1000) }) }).then(()=>{ console.log('hello-200'); return new Promise((resolve,reject)=>{ setTimeout(()=>{ // resolve() reject('error-300') },3000) }) }).then(()=>{ console.log('成功回调'); }).catch(err=>{ console.log(err); })第三种写法 new Promise((resolve,reject)=>{ setTimeout(()=>{ // resolve('hello-world') reject('error') },1000) }).then((data)=>{ console.log(data); },(err)=>{ console.log(err); })四、promise的链式调用 第一种写法 new Promise((resolve,reject)=>{ setTimeout(() => { resolve('链式调用') }, 1000); }).then((data)=>{ console.log(data + '111'); return new Promise((resolve,reject)=>{ resolve(data+'222') }) }).then(data1=>{ console.log(data1); return new Promise((resolve)=>{ resolve(data1 + '333') }) }).then(data2=>{ console.log(data2); }) 第二种写法 new Promise((resolve,reject)=>{ setTimeout(()=>{ // 请求成功时的回调 resolve('哈哈哈') // 请求失败时的回调 // reject('报错') }) }).then((data)=>{ console.log(data+'111'); return Promise.resolve(data) }).then(data=>{ console.log(data+'222'); return Promise.resolve(data) }).then(data=>{ console.log(data + '333'); }).catch(err =>{ console.log(err); }) 第三种写法 new Promise(resolve=>{ setTimeout(()=>{ resolve('呵呵呵') },1000) }).then(data=>{ console.log(data+'111'); return data }).then(data=>{ console.log(data+'222'); return data }).then(data=>{ console.log(data+'333'); }) 第四种最简写法–请求失败 new Promise((resolve,reject)=>{ setTimeout(() => { resolve('啊啊啊') }, 1000); }).then(data=>{ console.log(data); throw 'error-data' }).then(data=>{ console.log(data); return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(data) },1000) }) }).then(data=>{ console.log(data); }).catch(err=>{ console.log(err); })五、promise的all处理多个请求 Document Promise.all([ new Promise((resolve,reject)=>{ setTimeout(() => { resolve('第一次请求') // reject('第一次请求失败') }, 2000); }), new Promise((resolve,reject)=>{ setTimeout(() => { resolve('第二次请求') // reject('第二次请求失败') }, 1000); }) ]).then(result=>{ console.log(result); //得出数组结构：["第一次请求", "第二次请求"] console.log(result[0]); console.log(result[1]); }).catch(err => { // console.log(err); // console.log(err[0]); // console.log(err[1]); })实现的效果图 |
【本文地址】
今日新闻 |
推荐新闻 |